<%@page import="com.muk.meis.model.service.report.ReportByDistrict"%>
<%@page import="com.muk.meis.model.bean.School"%>
<%@page import="java.util.Map"%>
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.EnumSet"%>
<%@page import="com.muk.meis.MEISConstance.DISTRICT"%>
<%@page import="com.muk.meis.model.service.ReportService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEIS</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<link href="css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Beginning of compulsory code below -->

<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />

<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->
<script language="javascript" type="text/javascript"
	src="js/flot/jquery.flot.js"></script>
<style type="text/css">
.mesi_header_m {
	color: #F00;
}
</style>
<link href="css/meis.css" rel="stylesheet" type="text/css">
</head>
<body>
	<form> 
	<%
	String districtId = request.getParameter("districtId");
	ReportService service = new ReportService();
	NumberFormat formatter = new DecimalFormat("###,###,###");
	%>    
       <jsp:include page="menu.jsp"></jsp:include>
       
       <div style="position:relative;padding-top: 60px; padding-left:450px;">
                                      ปีการศึกษา
          <select>
               <option>2554</option>
               <option>2553</option>
          </select>
          <input type="button" class="button" value="ค้นหา">
       </div>

       <div>
			<script type="text/javascript">
				$(function(){
		
	
					// Dialog			
					$('#dialog').dialog({
						autoOpen: false,
						width: 700,
						height: 550,
						buttons: {
							"Ok": function() { 
								$(this).dialog("close"); 
							}, 
							"Cancel": function() { 
								$(this).dialog("close"); 
							} 
						}
					});
					
					// Dialog Link
					$('#dialog_link').click(function(){
						$('#dialog').dialog('open');
						return false;
					});
					
					//hover states on the static widgets
					$('#dialog_link, ul#icons li').hover(
						function() { $(this).addClass('ui-state-hover'); }, 
						function() { $(this).removeClass('ui-state-hover'); }
					)
					
				});
			</script>       
			<style type="text/css">
				#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
				#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
				ul#icons {margin: 0; padding: 0;}
				ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
				ul#icons span.ui-icon {float: left; margin: 0 4px;}
			</style>
				<p>
				<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
					<span class="ui-icon ui-icon-newwin"></span>แสดงกราฟ
				</a>
				</p>
				
	            <!-- ui-dialog -->
				<div id="dialog" title="กราฟ">	
					<!-- amcharts script-->
					<!-- swf object (version 2.2) is used to detect if flash is installed and include swf in the page -->
					<script type="text/javascript" src="amcharts/flash/swfobject.js"></script>
			
					<!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div -->
					<div id="pie"></div>
				        <%
				        ReportByDistrict reportByDistrict = new ReportByDistrict();
					    String xmlReport = reportByDistrict.getXMLReportByDistrict(districtId);
				        %> 
					    <script type="text/javascript">
					    
				            var params = {
				                bgcolor:"#FFFFFF"
				                };
				
						    var flashVars = {
						        path: "amcharts/flash/",
						        chart_settings: encodeURIComponent("<settings><background><alpha>100</alpha><border_alpha>20</border_alpha></background><legend><enabled>0</enabled><align>center</align></legend><pie><y>50%</y><inner_radius>30</inner_radius></pie><animation><start_time>2</start_time><start_effect>strong</start_effect><pull_out_time>1.5</pull_out_time></animation><data_labels><show>{title}: {value}</show><max_width>140</max_width></data_labels></settings>"),
						        //settings_file: "test/settings.xml",
				                //chart_data: encodeURIComponent("<pie><slice title='United States'>19544</slice><slice title='Japan'>5455</slice><slice title='Unresolved'>4229</slice><slice title='France'>2313</slice><slice title='Germany'>2208</slice><slice title='United Kingdom'>2057</slice><slice title='India'>1771</slice><slice title='Russian Federation'>1495</slice><slice title='Korea, Republic of'>1281</slice></pie>"),
				                chart_data: encodeURIComponent("<%=xmlReport%>"),
						        chart_id:"pie"
							};
				
					    	swfobject.embedSWF("amcharts/flash/ampie.swf", "pie", "600", "400", "8.0.0", "amcharts/flash/expressInstall.swf", flashVars, params);
				 
				        </script>
				 </div>
       </div>
              
       <div style="position:relative;padding-top: 30px;">
         <div align="center" style="padding-bottom: 10px;"><%="อำเภอ  "+DISTRICT.getMessageDisplay(Integer.parseInt(districtId))%></div>
       	<table border="1" width="1200px;" cellspacing="0px;" bordercolor="#CCCCCC">
       	    <caption style="position: relative;padding-bottom: 20px;">ตาราง จำนวนห้องเรียน  นักเรียน แยกชาย หญิง จำแนกตามขนาดโรงเรียน รายอำเภอ</caption>
       		
       		<tr bordercolor="#CCCCCC" bgcolor="#ADFF5B" align="center">
	       			<td rowspan="2">ที่</td>
	       			<td align="center" rowspan="2">ชื่อสถานศึกษา</td>
	       			
	       			<td align="center" colspan="2">อ.1</td>
	       			<td align="center" colspan="2">อ.2</td>
	       			<td align="center" colspan="2">รวม อ.</td>
	       			
	       			<% for(int i=1;i<=6;i++){ %>
	       			 <td colspan="2"><%="ป."+i%></td>
	       			<% } %>
	       			<td align="center" colspan="2">รวมประถม</td>
	       			
	       			<% for(int i=1;i<=3;i++){ %>
	       			 <td align="center" colspan="2"><%="ป."+i%></td>
	       			<% } %>
	       			<td align="center" colspan="2">รวม ม.ต้น</td>       			
	       			<td align="center" colspan="4">รวมทั้งสิ้น</td>       			
	       		</tr>
	       		<tr bordercolor="#CCCCCC" bgcolor="#ADFF5B">
	       		   <% for(int i=1;i<=2;i++){ %>
	       			    <td align="center">ชาย</td>
	       			    <td align="center">หญิง</td>
	       			<% } %>
	       			<td align="center" style="color:#F00">รวม</td>
	       			<td align="center">ห้อง</td>
	       			
	       		   <% for(int i=1;i<=6;i++){ %>
	       			    <td align="center">ชาย</td>
	       			    <td align="center">หญิง</td>
	       			<% } %>
	       			<td align="center" style="color:#F00">รวม</td>
	       			<td align="center">ห้อง</td>
	       			
	       		   <% for(int i=1;i<=3;i++){ %>
	       			    <td align="center">ชาย</td>
	       			    <td align="center">หญิง</td>
	       			<% } %>
	       			<td align="center" style="color:#F00">รวม</td>
	       			<td align="center">ห้อง</td>   
	       			
	       			<td align="center">ชาย</td>  
	       			<td align="center">หญิง</td>  
	       			<td align="center" style="color:#F00">รวม</td>  
	       			<td align="center">ห้อง</td>  
	       			    			
	       		</tr>
       		  <%
       		   Map<String,List<School>> report = service.getReportByDistrict(districtId);
       		  for (Map.Entry<String, List<School>> data : report.entrySet()) {
         		    List<School> lstSchool = data.getValue();
           		    int counter = 1;       			  
       		  %>
       		    <tr bordercolor="#FFFFFF">
       		    	<td colspan="2" bgcolor="#B0DBDF" style="padding-left:10px;"><%=data.getKey()%></td>
       		    </tr>
       		    <% if(lstSchool.size() == 0) {%>
       		    <tr bordercolor="#FFFFFF">
       		    	<td colspan="2" style="padding-left:40px;">-</td>
       		    </tr>
       		    <% } %>
       		    <%
       		    for(School school : lstSchool) {
       		    %>       		   
       		    <tr align="right" bordercolor="#CCCCCC">
       		       <td align="center"><%=counter++%></td>
       		       <td align="left"><%=school.getSchoolName()%></td>
       		       
       		       <td><%=formatter.format(school.getKindergartenMan1())%></td>
       		       <td><%=formatter.format(school.getKindergartenGirl1())%></td>
       		       
       		       <td><%=formatter.format(school.getKindergartenMan2())%></td>
       		       <td><%=formatter.format(school.getKindergartenGirl2())%></td>
       		       
       		       <td style="color:#F00"><%=formatter.format(school.getKindergartenMan1()+school.getKindergartenMan2()+
       		    		                   school.getKindergartenGirl1()+school.getKindergartenGirl2())%></td>
       		       <td><%=formatter.format(school.getRoomKindergarten1()+school.getRoomKindergarten2())%></td>  
       		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan1())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl1())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan2())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl2())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan3())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl3())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan4())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl4())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan5())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl5())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getPrimaryEducationMan6())%></td>
       		       <td><%=formatter.format(school.getPrimaryEducationGirl6())%></td>
       		       
       		       <td style="color:#F00"><%=formatter.format(school.getPrimaryEducationMan1()+school.getPrimaryEducationMan2()+school.getPrimaryEducationMan3()+
       		    		                   school.getPrimaryEducationMan4()+school.getPrimaryEducationMan5()+school.getPrimaryEducationMan6()+
       		    		                   school.getPrimaryEducationGirl1()+school.getPrimaryEducationGirl2()+school.getPrimaryEducationGirl3()+
    		    		                   school.getPrimaryEducationGirl4()+school.getPrimaryEducationGirl5()+school.getPrimaryEducationGirl6())%></td>
       		       <td><%=formatter.format(school.getRoomPrimaryEducation1()+school.getRoomPrimaryEducation2()+school.getRoomPrimaryEducation3()+
       		    		                   school.getRoomPrimaryEducation4()+school.getRoomPrimaryEducation5()+school.getRoomPrimaryEducation6())%></td>

       		       <td><%=formatter.format(school.getHighSchoolMan1())%></td>
       		       <td><%=formatter.format(school.getHighSchoolGirl1())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getHighSchoolMan2())%></td>
       		       <td><%=formatter.format(school.getHighSchoolGirl2())%></td>
       		             		            		       
       		       <td><%=formatter.format(school.getHighSchoolMan2())%></td>
       		       <td><%=formatter.format(school.getHighSchoolGirl2())%></td>
       		             		            		       
       		       <td style="color:#F00"><%=formatter.format(school.getHighSchoolMan1()+school.getHighSchoolMan2()+school.getHighSchoolMan3()+
       		    		                   school.getHighSchoolGirl1()+school.getHighSchoolGirl2()+school.getHighSchoolGirl3())%></td>
       		       <td><%=formatter.format(school.getRoomHighSchool1()+school.getRoomHighSchool2()+school.getRoomHighSchool3())%></td>
       		       
       		       <td><%=formatter.format(school.getKindergartenMan1()+school.getKindergartenMan2()+
       		    		                   school.getPrimaryEducationMan1()+school.getPrimaryEducationMan2()+school.getPrimaryEducationMan3()+
		                                   school.getPrimaryEducationMan4()+school.getPrimaryEducationMan5()+school.getPrimaryEducationMan6()+
		                                   school.getHighSchoolMan1()+school.getHighSchoolMan2()+school.getHighSchoolMan3())%></td>  
       		       <td><%=formatter.format(school.getKindergartenGirl1()+school.getKindergartenGirl2()+
       		    		                   school.getPrimaryEducationGirl1()+school.getPrimaryEducationGirl2()+school.getPrimaryEducationGirl3()+
		                                   school.getPrimaryEducationGirl4()+school.getPrimaryEducationGirl5()+school.getPrimaryEducationGirl6()+
		                                   school.getHighSchoolGirl1()+school.getHighSchoolGirl2()+school.getHighSchoolGirl3())%></td>  
       		       <td style="color:#F00"><%=formatter.format(school.getKindergartenMan1()+school.getKindergartenMan2()+
				   		                   school.getPrimaryEducationMan1()+school.getPrimaryEducationMan2()+school.getPrimaryEducationMan3()+
				                           school.getPrimaryEducationMan4()+school.getPrimaryEducationMan5()+school.getPrimaryEducationMan6()+
				                           school.getHighSchoolMan1()+school.getHighSchoolMan2()+school.getHighSchoolMan3()+
				       		    		   school.getKindergartenGirl1()+school.getKindergartenGirl2()+
       		    		                   school.getPrimaryEducationGirl1()+school.getPrimaryEducationGirl2()+school.getPrimaryEducationGirl3()+
		                                   school.getPrimaryEducationGirl4()+school.getPrimaryEducationGirl5()+school.getPrimaryEducationGirl6()+
		                                   school.getHighSchoolGirl1()+school.getHighSchoolGirl2()+school.getHighSchoolGirl3())%></td>  
       		       <td><%=formatter.format(school.getRoomKindergarten1()+school.getRoomKindergarten2()+
				       		    		   school.getRoomPrimaryEducation1()+school.getRoomPrimaryEducation2()+school.getRoomPrimaryEducation3()+
						                   school.getRoomPrimaryEducation4()+school.getRoomPrimaryEducation5()+school.getRoomPrimaryEducation6()+
       		    		                   school.getRoomHighSchool1()+school.getRoomHighSchool2()+school.getRoomHighSchool3())%></td>	       		    		                   	                                  
       		    </tr>
       		    
       		    <% } %>
       		  <%} %>
       	</table>
       </div>
       <jsp:include page="footer.jsp"></jsp:include> 
	</form>
</body>
</html>